<template>
    <view>
		<view v-if="datalist.length > 0" :class="'mofang-list '+(isincontent ? 'incontent' : '')">
			<block v-for="(floor, index) in datalist" :key="index">
			    <block v-if="floor.position == propLocation">
					<block v-if="floor.type == 5">
						<view v-if="floor.config_data_arr.length > 0" class="pr" :style="'padding-top:'+(floor.top || 0)+'rpx;margin:0rpx '+(floor.left_and_right || 0)+'rpx '+(floor.bottom || 0)+'rpx;'">
							<view v-if="floor.is_ad_flag == 1" class="pa ad-flag">{{$t('fengcheche.adflag')}}</view>
							<swiper :indicator-dots="floor.config_data_arr.length > 0" :indicator-color="indicator_color" :indicator-active-color="indicator_active_color" :autoplay="floor.config_data_arr.length > 0" :circular="circular" :class="'banner banner-'+(floor.banner_type || 'default')" :style="'border-radius:'+(floor.config_data_arr[0].img_radius || 0)+'rpx'">
								<block v-for="(item, index2) in floor.config_data_arr" :key="index2">
									<swiper-item>
										<image :src="item.img" mode="widthFix" :data-value="item.url_value || ''" :data-type="item.event_type" :data-pos="floor.position" @tap="banner_event"></image>
									</swiper-item>
								</block>
							</swiper>
						</view>
					</block>
					<block v-else>
						<view v-if="floor.config_data_arr.length > 0" class="mofang-img pr" :style="'padding-top:'+(floor.top || 0)+'rpx;margin:0rpx '+(floor.left_and_right || 0)+'rpx '+(floor.bottom || 0)+'rpx;'">
							<block v-if="floor.type == 1">
								<block v-for="(item, index2) in floor.config_data_arr" :key="index2">
									<block v-if="index2 == 0">
										<view v-if="floor.is_ad_flag == 1" class="pa ad-flag">{{$t('fengcheche.adflag')}}</view>
										<image :class="'mofang_'+floor.type+'_'+index2" :src="item.img" mode="widthFix" :data-value="item.url_value || ''" :data-type="item.event_type" :data-pos="floor.position" @tap="banner_event" :style="'border-radius:'+(item.img_radius || 0)+'rpx;width:100%;'"></image>
									</block>
								</block>
							</block>
							<block v-else-if="floor.type == 2 && floor.config_data_arr.length > 1">
								<view class="mofang_half">
									<block v-for="(item, index2) in floor.config_data_arr" :key="index2">
										<block v-if="index2 == 0">
											<view v-if="floor.is_ad_flag == 1" class="pa ad-flag">{{$t('fengcheche.adflag')}}</view>
											<image :class="'mofang_'+floor.type+'_'+index2" :src="item.img" mode="widthFix" :data-value="item.url_value || ''" :data-type="item.event_type" :data-pos="floor.position" @tap="banner_event" :style="'border-radius:'+(item.img_radius || 0)+'rpx;width: calc(100% - '+(item.img_right || 0)+'rpx);'"></image>
										</block>
									</block>
								</view>
								<view class="mofang_half">
									<block v-for="(item, index2) in floor.config_data_arr" :key="index2">
										<block v-if="index2 == 1">
											<view v-if="floor.is_ad_flag == 1" class="pa ad-flag">{{$t('fengcheche.adflag')}}</view>
											<image :class="'fr mofang_'+floor.type+'_'+index2" :src="item.img" mode="widthFix" :data-value="item.url_value || ''" :data-type="item.event_type" :data-pos="floor.position" @tap="banner_event" :style="'border-radius:'+(item.img_radius || 0)+'rpx;width: calc(100% - '+(floor.config_data_arr[0].img_right || 0)+'rpx);'"></image>
										</block>
									</block>
								</view>
							</block>
							<block v-else-if="floor.type == 3 && floor.config_data_arr.length > 2">
								<view class="mofang_half">
									<block v-for="(item, index2) in floor.config_data_arr" :key="index2">
										<block v-if="index2 == 0">
											<view v-if="floor.is_ad_flag == 1" class="pa ad-flag">{{$t('fengcheche.adflag')}}</view>
											<image :class="'mofang_'+floor.type+'_'+index2" :src="item.img" mode="widthFix" :data-value="item.url_value || ''" :data-type="item.event_type" :data-pos="floor.position" @tap="banner_event" :style="'border-radius:'+(item.img_radius || 0)+'rpx;width: calc(100% - '+(item.img_right || 0)+'rpx);'"></image>
										</block>
									</block>
								</view>
								<view class="mofang_half">
									<block v-for="(item, index2) in floor.config_data_arr" :key="index2">
										<block v-if="index2 < floor.type && index2 > 0">
											<view v-if="floor.is_ad_flag == 1" class="pa ad-flag">{{$t('fengcheche.adflag')}}</view>
											<image :class="'fr mofang_'+floor.type+'_'+index2" :src="item.img" mode="widthFix" :data-value="item.url_value || ''" :data-type="item.event_type" :data-pos="floor.position" @tap="banner_event" :style="'border-radius:'+(item.img_radius || 0)+'rpx;margin-bottom:'+(item.img_bottom || 0)+'rpx;width: calc(100% - '+(floor.config_data_arr[0].img_right || 0)+'rpx);'"></image>
										</block>
									</block>
								</view>
							</block>
							<block v-if="floor.type == 4 && floor.config_data_arr.length > 3">
								<view class="mofang_half">
									<block v-for="(item, index2) in floor.config_data_arr" :key="index2">
										<view v-if="floor.is_ad_flag == 1 && index2 == 0" class="pa ad-flag">{{$t('fengcheche.adflag')}}</view>
										<image :class="'mofang_'+floor.type+'_'+index2" v-if="index2 == 0" :src="item.img" mode="widthFix" :data-value="item.url_value || ''" :data-type="item.event_type" :data-pos="floor.position" @tap="banner_event" :style="'border-radius:'+(item.img_radius || 0)+'rpx;width: calc(100% - '+(item.img_right || 0)+'rpx);'"></image>
									</block>
								</view>
								<view class="mofang_half">
									<block v-for="(item, index2) in floor.config_data_arr" :key="index2">
										<view v-if="floor.is_ad_flag == 1 && index2 == 1" class="pa ad-flag">{{$t('fengcheche.adflag')}}</view>
										<image :class="'fr mofang_'+floor.type+'_'+index2" v-if="index2 == 1" :src="item.img" mode="widthFix" :data-value="item.url_value || ''" :data-type="item.event_type" :data-pos="floor.position" @tap="banner_event" :style="'border-radius:'+(item.img_radius || 0)+'rpx;margin-bottom:'+(item.img_bottom || 0)+'rpx;width: calc(100% - '+(floor.config_data_arr[0].img_right || 0)+'rpx);'"></image>
									</block>
									<view class="fr four_mofang" :style="'width: calc(100% - '+(floor.config_data_arr[0].img_right || 0)+'rpx);'">
										<view class="mofang_half">
											<block v-for="(item, index2) in floor.config_data_arr" :key="index2">
												<view v-if="floor.is_ad_flag == 1 && index2 == 2" class="pa ad-flag">{{$t('fengcheche.adflag')}}</view>
												<image :class="'mofang_'+floor.type+'_'+index2" v-if="index2 == 2" :src="item.img" mode="widthFix" :data-value="item.url_value || ''" :data-type="item.event_type" :data-pos="floor.position" @tap="banner_event" :style="'border-radius:'+(item.img_radius || 0)+'rpx;width: calc(100% - '+(item.img_right || 0)+'rpx);'"></image>
											</block>
										</view>
										<view class="mofang_half">
											<block v-for="(item, index2) in floor.config_data_arr" :key="index2">
												<view v-if="floor.is_ad_flag == 1 && index2 == 3" class="pa ad-flag">{{$t('fengcheche.adflag')}}</view>
												<image :class="'fr mofang_'+floor.type+'_'+index2" v-if="index2 == 3" :src="item.img" mode="widthFix" :data-value="item.url_value || ''" :data-type="item.event_type" :data-pos="floor.position" @tap="banner_event" :style="'border-radius:'+(item.img_radius || 0)+'rpx;width: calc(100% - '+(floor.config_data_arr[2].img_right || 0)+'rpx);'"></image>
											</block>
										</view>
									</view>
								</view>
							</block>
							<view class="clear"></view>
						</view>
						<view class="clear"></view>
					</block>
				</block>
			</block>
		</view>
    </view>
</template>
<script>
    const app = getApp();

    export default {
        data() {
            return {
                indicator_dots: false,
                indicator_color: 'rgba(0, 0, 0, .2)',
                indicator_active_color: '#666',
                autoplay: true,
                circular: true,
				isincontent:false,
            };
        },
		// 页面被展示
		created() {
		    this.init();
		},
        components: {},
        props: {
			propLocation: {
				type: [String,Number],
				default: 0
			},
            propData: {
            	type: [Array,Object],
            	default: []
            },
			propIsInContent: {
				type: [String],
				default: 'false'
			},
			propUserkey: {
				type: [String],
				default: ''
			},
			propUserid: {
				type: [String],
				default: ''
			},
        },
		//对传值进行计算
		computed:{
			datalist(){
				if (Array.isArray(this.propData)) {
					return this.propData
				} else if (typeof this.propData === 'object') {
					return Object.entries(this.propData)
				} else {
					return []
				}
			}
		},
        methods: {
			init() {
				if(this.$props.propIsInContent == 'true')
				{
					this.isincontent = true;
				}
			},
			
            banner_event(e) {
				var pos = e.currentTarget.dataset.pos || null;
				if(pos != null && parseInt(pos) == 11)
				{
					this.$emit('mofangback', e);
				}else{
					// 处理一些特殊的跳转值
					var value = e.currentTarget.dataset.value || null;
					if(value != null && value == 'mayirecharge')
					{
						// #ifdef MP-WEIXIN
						wx.openEmbeddedMiniProgram({
						    appId: 'wx5f482af87ff127ca',
						    path: 'pages/recharge/recharge?apikey='+this.propUserkey+'&uid='+this.propUserid
						})
						// #endif
					}else if(value != null && value == 'mayimovie')
					{
						// #ifdef MP-WEIXIN
						wx.openEmbeddedMiniProgram({
						    appId: 'wx5f482af87ff127ca',
						    path: 'plugin://mayi-movie/index?movieuid='+this.propUserid+'&movieapikey='+this.propUserkey+'&homepath=/pages/home/home&index=/pages/home/home&isswitch=1'
						})
						// #endif
					}else if(value != null && value == 'mayitea')
					{
						// #ifdef MP-WEIXIN
						wx.openEmbeddedMiniProgram({
						    appId: 'wx5f482af87ff127ca',
						    path: 'pages/recharge/index?apikey='+this.propUserkey+'&uid='+this.propUserid
						})
						// #endif
					}else if(value != null && value == 'mayigroups')
					{
						// #ifdef MP-WEIXIN
						wx.openEmbeddedMiniProgram({
						    appId: 'wx5f482af87ff127ca',
						    path: 'plugin-private://wx8b412290993bf26a/pages/index/index?apikey='+this.propUserkey+'&uid='+this.propUserid+'&index=/pages/index/index'
						})
						// #endif
					}else if(value != null && value == 'mayicard')
					{
						// #ifdef MP-WEIXIN
						wx.openEmbeddedMiniProgram({
						    appId: 'wxa90429c57325c4c5',
						    path: 'pages/index/index?apikey='+this.propUserkey+'&uid='+this.propUserid
						})
						// #endif
					}else{
						app.globalData.operation_event(e);
					}
				}
            }
        }
    };
</script>
<style>
	.clear{clear:both;}
	.mofang-list{margin-left:0rpx;margin-right:0rpx;}
	.mofang-list.incontent{margin-left:-20rpx;margin-right:-20rpx;}
    .banner {
        background: #fff;
        overflow: hidden;
    }
    .banner image {
        min-width: 100%;
    }
    .banner-mini,
    .banner-mini image {
        height: 200rpx !important;
    }
    .banner-default,
    .banner-default image {
        height: 320rpx !important;
    }
    .banner-max,
    .banner-max image {
        height: 420rpx !important;
    }
	.banner-full,
	.banner-full image {
	    height: 100vh !important;
	}
	.mofang-img image{max-width: 100% !important;}
	.mofang_half{width:50%;float:left;box-sizing: border-box;}
	.ad-flag{font-size:20rpx !important;color:#fff;padding:3rpx 0 0 20rpx;z-index: 1;}
</style>